<template>
	<view class="detail active">
		<view class="header-nav">
			<view class="header">
				<view class="my-aside">
					<image @click.stop="showFn" class="img" src="../../static/assets/category-on.png" mode=""></image>
				</view>
				<text class="sift-title">连衣裙{{id}}</text>
				<view class="search-icon" @click="jumpToSearchFn()">
					<image class="img" src="../../static/assets/category-search.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="select">
			<ul class="nav">
				<li @click="toggleActive('综合')" :class="{active: selectedCategory === '综合'}">
					<view class="t-1">综合
						<view class="b-icon" v-if="isActive">
							<uni-icons type="down" size="15"></uni-icons>
						</view>
						<view class="t-icon" v-else>
							<uni-icons type="up" size="15"></uni-icons>
						</view>
						<ol class="list" :style="`visibility: ${isActive ? 'visible' : 'hidden'}`">
							<li @click="selectSort('高到低')" :class="{active: selectedSort==='高到低'}">价格从高到低</li>
							<li @click="selectSort('低到高')" :class="{active: selectedSort==='低到高'}">价格从低到高</li>
						</ol>
					</view>
				</li>
				<li @click="selectCategory('销量')" :class="{active: selectedCategory === '销量'}">销量</li>
				<li @click="selectCategory('官网')" :class="{active: selectedCategory === '官网'}">官网</li>
				<li @click="selectCategory('品牌')" :class="{active: selectedCategory === '品牌'}">品牌</li>
				<li @click="selectCategory('筛选')" :class="{active: selectedCategory === '筛选'}">筛选</li>
			</ul>

		</view>

		<!-- ID:{{id}} -->
		<view class="layout">
			<view class="content">
				<view class="left">
					<view class="box" @click="jumpToDetailFn(item.id)"
						v-for="(item, index) in sift_list.slice(0, Math.ceil(sift_list.length / 2))" :key="item.id">
						<view class="box-img">
							<image class="img" :src="item.sift_img" mode="widthFix"></image>
							<!-- <view class="img" :style="{ backgroundImage: `url(${item.sift_img})` }"></view> -->
						</view>
						<view class="content-footer">
							<h4>{{ item.sift_text }}</h4>
							<view class="box-footer">
								<view class="box-left">
									<view class="price-tow">
										<view class="price-1">
											<text class="price01">￥</text>
											<text class="price">{{ item.sift_Sprict }}</text>
											<text class="price01">起</text>
										</view>
										<view class="price-2">
											<text class="price01">￥</text>
											<text class="price">{{ item.sift_Oprict }}</text>
										</view>
									</view>
									<view class="business">
										<text class="send">发送方：</text>
										<!-- <image class="img" :src="item.sift_user_img" mode=""></image> -->
										<view class="img" :style="{ backgroundImage: `url(${item.sift_user_img})` }">
										</view>
										<text class="send-name">{{ item.sift_user_address }}</text>
									</view>
								</view>
								<view class="box-right" :class="{ active: item.isActive }"
									@click.stop="toggleCart(item)">
									<image class="img" src="../../static/assets/cart-add.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="box" @click="jumpToDetailFn(item.id)"
						v-for="(item, index) in sift_list.slice(Math.ceil(sift_list.length / 2))"
						:key="item.id + 'right'">
						<view class="box-img">
							<image class="img" :src="item.sift_img" mode="widthFix"></image>
							<!-- <view class="img" :style="{ backgroundImage: `url(${item.sift_img})` }"></view> -->
						</view>
						<view class="content-footer">
							<h4>{{ item.sift_text }}</h4>
							<view class="box-footer">
								<view class="box-left">
									<view class="price-tow">
										<view class="price-1">
											<text class="price01">￥</text>
											<text class="price">{{ item.sift_Sprict }}</text>
											<text class="price01">起</text>
										</view>
										<view class="price-2">
											<text class="price01">￥</text>
											<text class="price">{{ item.sift_Oprict }}</text>
										</view>
									</view>
									<view class="business">
										<text class="send">发送方：</text>
										<!-- <image class="img" :src="item.sift_user_img" mode=""></image> -->
										<view class="img" :style="{ backgroundImage: `url(${item.sift_user_img})` }">
										</view>
										<text class="send-name">{{ item.sift_user_address }}</text>
									</view>
								</view>
								<view class="box-right" :class="{ active: item.isActive }"
									@click.stop="toggleCart(item)">
									<image class="img" src="../../static/assets/cart-add.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>

	<!-- 弹出侧边栏 -->
	<view class="mask" :style="`left: ${isShow == true ? '0rpx':'-35%'}`">
		<ul>
			<li v-for="(item,index) in category_list" :key="item.id" @click="SelectCategoryFn(index)"
				:class="{active: index === SelectCategory}">
				{{item.category_text}}
			</li>
		</ul>
	</view>

	<!-- 点击侧边栏出现遮罩层 -->
	<view :class="{hide: isShow == true}" @click.stop="hideFn"></view>

</template>

<script>
	export default {
		data() {
			return {
				// 获取分类跳转到更多筛选页
				id: "",
				// 显示侧边栏
				isShow: false,
				// 点击分类索引
				SelectCategory: 0,
				// 详情页参数id
				detail_id: "",
				// 用于保存当前选中的排序方式
				selectedSort: "",
				// 分类列表
				category_list: [{
						id: 1,
						category_text: "精选"
					},
					{
						id: 2,
						category_text: "男装"
					},
					{
						id: 3,
						category_text: "女装"
					},
					{
						id: 4,
						category_text: "鞋子"
					},
					{
						id: 5,
						category_text: "箱包"
					},
					{
						id: 6,
						category_text: "其他"
					},
				],
				// 控制下拉列表显示与否  
				isActive: false,
				// 当前选中的分类  
				selectedCategory: '综合',
				// 商品数组
				sift_list: [{
						id: 1,
						sift_img: "https://img.alicdn.com/imgextra/i3/445755145/O1CN019Pk82h1nsSdrsHayd_!!445755145.jpg_.webp",
						sift_text: "美拉德穿搭高级感撞色翻领棉服外套男女秋冬港风复古轻薄夹克棉衣",
						sift_Sprict: "59",
						sift_Oprict: "99",
						sift_user_img: "https://img0.baidu.com/it/u=870975181,849440641&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
						sift_user_address: "广东广州"
					},
					{
						id: 2,
						sift_img: "https://img0.baidu.com/it/u=2105830478,192522718&fm=253&fmt=auto&app=120&f=JPEG?w=142&h=142",
						sift_text: "优雅蕾丝边长裙，宛若仙女",
						sift_Sprict: "69",
						sift_Oprict: "97",
						sift_user_img: "https://img0.baidu.com/it/u=3081415685,2219539125&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800",
						sift_user_address: "广东广州"
					},
					{
						id: 3,
						sift_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/610259/2024/0804/56/76e14234-b882-4930-9b3a-475da8938217_262x262_90.jpg",
						sift_text: "休闲宽松格子衬衫，随性搭配",
						sift_Sprict: "49",
						sift_Oprict: "64",
						sift_user_img: "https://img2.baidu.com/it/u=2951414117,53558172&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
						sift_user_address: "广东广州"
					},
					{
						id: 4,
						sift_img: "https://img.alicdn.com/bao/uploaded/i4/2200580775825/O1CN01k1cD311stu5d9GWNl_!!2200580775825.jpg_.webp",
						sift_text: "秋冬保暖羊毛针织开衫",
						sift_Sprict: "39",
						sift_Oprict: "47",
						sift_user_img: "https://img0.baidu.com/it/u=3786625063,3929489332&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
						sift_user_address: "广东广州"
					},
					{
						id: 5,
						sift_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/655481/2024/1016/158/5c4e5651-cfbb-468a-b4e3-0b5c81b13f46_262x262_90.jpg",
						sift_text: "时尚休闲裤，舒适随行",
						sift_Sprict: "49",
						sift_Oprict: "59",
						sift_user_img: "https://img2.baidu.com/it/u=3698869883,3653513224&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
						sift_user_address: "广东广州"
					},
					{
						id: 6,
						sift_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/08/09/51/0436ffc4-902d-4e00-81be-80b0b8ced3f2_262x262_90.jpg",
						sift_text: "休闲宽松牛仔裤，百搭单品",
						sift_Sprict: "78",
						sift_Oprict: "121",
						sift_user_img: "https://img0.baidu.com/it/u=1500724738,485667787&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
						sift_user_address: "广东广州"
					},
					{
						id: 7,
						sift_img: "https://img.alicdn.com/imgextra/i3/2966343102/O1CN01pD70F51YmlSsRAuqL_!!0-item_pic.jpg_.webp",
						sift_text: "个性拼接运动风外套",
						sift_Sprict: "57",
						sift_Oprict: "98",
						sift_user_img: "https://img1.baidu.com/it/u=1333417867,4012964063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
						sift_user_address: "广东广州"
					},
					{
						id: 8,
						sift_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/618791/2024/0422/157/beda7850-cfd8-4032-a1b0-0e2db647e803_262x262_90.jpg",
						sift_text: "经典小白鞋，永不过时的选择",
						sift_Sprict: "54",
						sift_Oprict: "88",
						sift_user_img: "https://img0.baidu.com/it/u=2270376806,4081867958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
						sift_user_address: "广东广州"
					},
					{
						id: 9,
						sift_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634503/2023/0413/137/21bdb328-bca4-4996-af42-d473cf11bb93_262x262_90.jpg",
						sift_text: "时尚斜挎包，百搭出行神器",
						sift_Sprict: "29",
						sift_Oprict: "50",
						sift_user_img: "https://img0.baidu.com/it/u=1690076377,4003691410&fm=253&fmt=auto&app=120&f=JPEG?w=507&h=500",
						sift_user_address: "广东广州"
					},
					{
						id: 10,
						sift_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2023/09/30/180/8d6a94fa-80a0-4119-966d-3fedba7ca938_262x262_90.jpg",
						sift_text: "潮流休闲卫衣，运动宅家两相宜",
						sift_Sprict: "49",
						sift_Oprict: "69",
						sift_user_img: "https://img1.baidu.com/it/u=160439374,2101854460&fm=253&fmt=auto&app=120&f=JPEG?w=504&h=500",
						sift_user_address: "广东广州"
					},
				],

			}
		},
		// 生命周期的钩子函数
		onLoad(options) {
			let id = options.id;
			// console.log(options);
			if (id) {
				this.id = id;
			}
		},
		methods: {
			// 侧边栏显示
			showFn() {
				this.isShow = !this.isShow;
			},
			// 侧边栏隐藏
			hideFn() {
				this.isShow = false;
			},
			// 点击分类索引方法
			SelectCategoryFn(id) {
				this.SelectCategory = id;
			},
			// 导航栏显示/隐藏方法  
			showActiveFn() {
				this.isActive = !this.isActive; // 切换状态 
			},
			// 切换该商品的购物车高亮状态
			toggleCart(item) {
				let token = uni.getStorageSync("AUTOTOKEN");
				if(!token){
					uni.showModal({
						title: "提示",
						content: "您还没登录，请登录！~~",
						success: (res) => {
							if (res.confirm) {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1000)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					})
				}
				else{
					if(!item.isActive){
						setTimeout(()=>{
							uni.showToast({
								title: "商品添加成功",
								icon: "success"
							},1000)
						})
					}else{
						// 取消添加购物车
						// console.log("取消添加到购物车");
					}
					item.isActive = !item.isActive;
					
				}
				// console.log(item);
			},
			// 设置选中的分类  
			selectCategory(category) {
				this.selectedCategory = category; // 更新选中类别  
				this.isActive = false; // 隐藏下拉列表  

			},
			// 导航栏显示/隐藏方法  
			toggleActive(category) {
				if (category === '综合') {
					this.isActive = !this.isActive;
					this.selectedCategory = this.isActive ? '综合' : '';
					event.stopPropagation(); // 阻止事件冒泡
				} else {
					this.selectedCategory = category;
					this.isActive = false;
				}
			},
			// 处理排序选择  
			selectSort(value) {
				// console.log('选择排序方式:', order); // 处理排序逻辑  
				this.isActive = false; // 隐藏下拉列表  
				if (this.selectedSort === value) {
					this.selectedSort = '';
				} else {
					this.selectedSort = value; // 否则选中新的排序
				}
			},
			// 跳转到搜索页
			jumpToSearchFn() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			// 根据参数跳转到相应的详情页
			jumpToDetailFn(detail_id) {
				const jsonDate = JSON.stringify(this.sift_list);
				uni.navigateTo({
					url: `/pages/detail/detail?detail_id=${detail_id}&data=${encodeURIComponent(jsonDate)}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';

	ul,
	ol {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	.detail {
		width: 100%;
		min-height: 1000rpx;
		box-sizing: border-box;

		&.active {
			background-color: #5a5a5a;
			z-index: 100;
		}
.header-nav{
	width: 100%;
	background-color: #fefefe;
	border: 2rpx solid #f0f0f0;
	position: fixed;
	top: 0;
	margin-bottom: 150rpx;
	z-index: 105;
	// background-color: #fc908f;
	.header {
		padding: $pad;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	
		.my-aside {
			width: 60rpx;
			height: 60rpx;
			box-shadow: $boxShadow;
			border-radius: 15rpx;
			text-align: center;
			border: 2rpx solid #ccc;
			box-sizing: border-box;
	
			.img {
				width: 50rpx;
				height: 50rpx;
				margin-top: 5rpx;
			}
		}
	
		.sift-title {
			color: $color;
			font-weight: 800;
			font-size: 35rpx;
		}
	
		.search-icon {
			width: 60rpx;
			height: 60rpx;
			box-shadow: $boxShadow;
			border-radius: 15rpx;
			text-align: center;
			border: 2rpx solid #ccc;
			box-sizing: border-box;
	
			.img {
				width: 50rpx;
				height: 50rpx;
				margin-top: 6rpx;
			}
		}
	}
	
}
		
		.select {
			width: 100%;
			height: 80rpx;
			box-shadow: 0 5rpx 15rpx #ece5e4;
			position: fixed;
			top: 153rpx;
			z-index: 100;

			ul.nav {
				padding: $pad;
				background-color: rgba(254, 253, 253, .8);
				// opacity: .9;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				overflow: visible;

				li {
					// width: 100%;
					padding: 20rpx 20rpx;

					// background-color: #fc908f;
					&.active {
						background-color: $bagroundColor;
						border-radius: 10rpx;
						color: white;
					}

					.t-1 {
						position: relative;
					}

					.b-icon,
					.t-icon {
						display: inline-block;
					}

					ol.list {
						width: 748rpx;
						text-align: left;
						position: absolute;
						top: 59rpx;
						left: -70rpx;
						// position: relative;
						background-color: #fff;
						z-index: 1000;
						border-radius: 10rpx;

						li {
							// background-color: $bagroundColor;
							margin-bottom: 10rpx;
							padding: 10rpx 15rpx;
							color: #666;
							border-radius: 10rpx;

							&.active {
								background-color: $bagroundColor;
								color: white;
							}
						}
					}
				}
			}
		}

		.layout {
			background-color: #f5f4f3;
			padding: 0 40rpx;
			// overflow-y: scroll;

			.content {
				margin-top: 250rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.left,
				.right {
					width: 47%;
					// height: 1000rpx;
					// margin: 0 15rpx;

					.box {
						width: 100%;
						// height: 650rpx;
						background-color: #fff;
						box-shadow: 5rpx 5rpx 10rpx #ccc;
						border-radius: 10rpx;
						padding: 20rpx 10rpx;
						margin-bottom: 30rpx;

						.img {
							width: 100%;
							object-fit: cover;
							// height: auto; // 允许高度自动调整
							// object-fit: cover; // 根据需要填充区域，保持比例
							// z-index: 1;
							// background-size: cover;
						}

						.content-footer {
							margin: 15rpx;
							padding: 10rpx 0;
							border-top: 2rpx solid #ccc;

							h4 {
								overflow: hidden;
								/* 超出隐藏 */
								display: -webkit-box;
								/* 设置为 flexbox */
								-webkit-box-orient: vertical;
								/* 垂直显示 */
								-webkit-line-clamp: 1;
								/* 显示的行数 */
								text-overflow: ellipsis;
								/* 超出部分显示省略号 */
								color: #5a5a5a;
								font-size: 33rpx;
							}

							.box-footer {
								width: 100%;
								margin-top: 10rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								// background-color: red;
								// background-color: darkblue;

								.box-left {
									.price-tow {
										display: flex;
										padding-bottom: 10rpx;

										.price-1 {
											font-size: 26rpx;
											color: $color;
											margin-right: 10rpx;

											.price {
												font-size: 35rpx;
												font-weight: 800;
											}
										}

										.price-2 {
											font-size: 25rpx;
											color: #c1c1c1;
											text-decoration: line-through;
											margin-top: 10rpx;
										}
									}

									.business {
										font-size: 15rpx;

										.send {
											color: #666;
										}

										.img {
											width: 27rpx;
											height: 27rpx;
											vertical-align: middle;
											margin-right: 10rpx;
											border-radius: 50%;
											display: inline-block;
										}

										.send-name {
											color: #666;
											font-size: 13rpx;
										}
									}
								}

								.box-right {
									width: 65rpx;
									height: 65rpx;
									border-radius: 50%;
									margin-top: 10rpx;
									text-align: center;
									background-color: #ff989d;
									margin-left: 20rpx;
									border: 2rpx solid #fff;

									&.active {
										background: $bgTop;
										box-shadow: $boxShadow;
									}

									.img {
										width: 35rpx;
										height: 35rpx;
										margin-top: 15rpx;
									}
								}
							}
						}
					}

				}


			}
		}
	}

	// 隐藏横向滚动条
	::-webkit-scrollbar {
		display: none;
	}

	// 遮罩层
	.hide {
		width: 100%;
		height: 100%;
		background-color: #5a5a5a;
		position: fixed;
		top: 0;
		opacity: .6;
		z-index: 101;
	}

	// 侧边栏
	.mask {
		width: 35%;
		height: 100%;
		background: $bgBottom;
		// opacity: .8;
		z-index: 102;
		position: fixed;
		top: 0;
		left: 0;
		transition: left .5s;
		box-sizing: border-box;

		ul {
			margin-top: 300rpx;
			box-sizing: border-box;

			li {
				padding: 30rpx 80rpx;
				margin-bottom: 50rpx;
				box-sizing: border-box;
				color: white;
				font-weight: bolder;

				&.active {
					background-color: #fbfafa;
					border-left: 8rpx solid $bagroundColor;
					padding: 30rpx 72rpx;
					color: #5a5a5a;
				}
			}
		}
	}
</style>